<!--
 * @Author: your name
 * @Date: 2021-08-04 14:36:41
 * @LastEditTime: 2021-08-13 19:06:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \niushop\src\views\Shouye\shouye.vue
-->
<template>
  
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <header>
        <div  class="titl">优选商城</div>
        <!-- <van-field v-model="value" 
        class="yh" 
        placeholder="请选择社区自提点" 
        is-link
        left-icon="wap-home"
        />     -->
        <van-swipe :autoplay="3000" 
        indicator-color="white"
        height="150"
        >
          <van-swipe-item >
            <img src="../../assets/images/1.jpg" />
          </van-swipe-item>
          <van-swipe-item >
            <img src="../../assets/images/2.jpg" />
          </van-swipe-item>
          <van-swipe-item >
            <img src="../../assets/images/3.jpg" />
          </van-swipe-item>
        </van-swipe>
        <van-row type="flex" justify="space-between" class="hd">
          <van-col span="6"><van-icon name="flower-o" />便宜有好货</van-col>
          <van-col span="8"><van-icon name="underway-o" />次日16：00领取</van-col>
          <van-col span="6"><van-icon name="completed" />售后无忧</van-col>
        </van-row>
    </header>
    <main>
      <div class="bzt">
          <span>如何在商城购买商品</span>
          <van-steps :active="active">
            <van-step>挑商品</van-step>
            <van-step>选提货点</van-step>
            <van-step>次日16点取货</van-step>
          </van-steps>
      </div>
      <div class="huopin">
          <ul>
              <li v-for="(item,index) in $store.state.list" :key="index" class="leibie" @click="gofenlei(item.name)">
                <div class="img"><img :src="item.src" ></div>
                <span>{{item.name}}</span>
              </li>
          </ul>
      </div>
      <van-card
  v-for="(item,index) in itemslist" :key="index"    
  
  :price="item.current_price+'元'" 
  :desc="'剩余'+item.goods_number"
  :title="item.title"
  :thumb="item.img_big_logo"
>
  <template #footer>
    <van-button size="small" class="goumai"
  @click="goshop(item)"
    >加入购物车</van-button>
  </template>
</van-card>

    </main>
  </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data(){
      return{
        isLoading: false,
        active:0,
        value:"",
        params:{
          pagesize:6,
          filter:"hot",
          category:"钟表眼镜"
        },
        itemslist:[], 
        imagelist:[],
      
      }
    },
  mounted(){
    this.shoplist=[]
    this.goods=[]
    this.qqsj()
  },
  methods:{  
    qqsj(){
      this.$http({
        method:"get",
        path:'/goods/list',
        params:this.params
      }).then(res=>{
        this.itemslist=res.data.list
      })
    },
    goshop(e){
      let id=window.sessionStorage.id
      let token=window.sessionStorage.token
      if(!token ||!id){
            this.$toast("您还没有登陆,请跳转登陆页,登陆后购买")
      }else {
        let goods_id=e.goods_id
        if(this.goods.includes(goods_id)){
            this.$toast("物品已在购物车")
        }else{
          this.$toast("加入购物车成功")
            this.goods.push(goods_id)
            console.log(this.goods);
            let goby=this.goods
             for(let i=0; i<goby.length; i++){
            this.$http({
              method:"post",
              path:"/cart/add",
              params:{
                goodsId:goby[i],
                id,
              }
            })
          }

        }
        this.$store.commit("changelist",e)
        }
      
    },
    onRefresh() {
      setTimeout(() => {
        // this.params={
        //   pagesize:6,
        //   filter:"hot",
        //   search:"食品"
        // }
        //  this.qqsj()
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 0);
    },
    gofenlei(val){
    window.sessionStorage.setItem('val',val)
    this.$router.push("/home/fenlei")
    }
  },
 
}

</script>


<style scoped>
.box{
  display: flex;
  flex-direction: column;
}
  header{
    padding: 10px;
    background:  linear-gradient(to right, #ff7647 ,#fd190c);
  }
  .daohang{
       line-height: 44px;
       margin-bottom: 10px;
  }
.titl{
  font-weight: 600;
  font-size: 20px;
  color: #f5f5f5;
  text-align: center;
 
}
.yh{
 
  border-radius: 22px ;
}
.van-swipe{
  margin-top: 10px;
}
.hd{
  font-size:12px;
  line-height: 30px;
  
}
.bzt{
  margin: 0 40px;
  padding: 10px 6px;
  background: white;
  height: 80px;

}
main{
  flex: 1;
  background: #f5f5f5;
  font-size: 14px;
}
ul{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 0;
}
li{
  width:25% ;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.goumai{
  border-radius: 20px;
  background-color: crimson;
  color: #f5f5f5;
}
.img{
  height: 70px;
  width: 70%;
  border-radius: 35px;
}
.img>img{
  border-radius: 35px;
}
</style>